<template>
	<div class="page">
		<c-title :hide="false" text="我的预约挂号"></c-title>
		<div class="content">
			<div class="list" v-for="(item,index) in list" :key="index" @click="godetail(item)">
				<div class="name item">
					<div class="ll">
						<div class="l">姓名</div>
						<div class="r">{{item.name}}</div>
					</div>
				<div class="rr" :class="item.status==0?'cr':'cg'">
					{{item.status==0?'取消预约':'已预约'}}
				</div>
				</div>
				<div class="mobile item">
					<div class="l">手机号</div>
					<div class="r">{{item.phone}}</div>
				</div>
				<div class="id_card item">
					<div class="l">身份证号</div>
					<div class="r">{{item.id_card}}</div>
				</div>
				<div class="ms item">
					<div class="l">病情描述</div>
					<div class="r">{{item.description}}</div>
				</div>
				<div class="time item">
					<div class="l">预约时间</div>
					<div class="r">{{item.visit_time}}</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	export default{
		data(){
			return{
				list:[]
			}
		},
		activated() {
			this.getdata()
		},
		methods:{
			godetail(item){
				this.$router.push(this.fun.getUrl("yydetail", {}, { ids: item.id  }));
			},
			getdata(){
				$http
					.post("plugin.hft-hospital.api.index.my_doctor_order", {
					})
					.then(response => {
						console.log(response)
						if (response.result === 1) {
							this.list=response.data
						} else {
							Toast(response.msg);
						}
					})
					.catch(error => {
						console.log(error);
					});
			}
		}
	}
</script>

<style scoped lang="scss">
	.page{
		.content{
			width: 95%;
			margin: 0 auto;
			.list{
				padding: 1rem;
				background-color: #fff;
				margin-top: 0.3rem;
				font-size: 1rem;
				border-radius: 0.3rem;
				box-shadow: 0.1rem 0.1rem 0.1rem #ccc;
				.name{
					display: flex;
					justify-content: space-between;
					.ll{
						display: flex;
						.l{
							letter-spacing: 2rem;
						}
					}
					.cg{
						color: #26DB6F;
					}
					.cr{
						color: #f00;
					}
				}
				.mobile{
					.l{
						letter-spacing: 0.5rem;
					}
				}
				.item{
					display: flex;
					margin:  0.5rem;
					
					.l{
						width: 6rem;
						color:#B9B9B9;
						text-align: left;
					}
				}
			}
		}
	}
</style>